<!--
	课程任务
-->
<template>
<!-- 最外面一层背景色 start -->
<div class="homework-manage-box">
<div class="homework-content">
	<el-tabs
		closable
		v-model="nowTabs"
		@tab-remove="removeTab"
	>
		<el-tab-pane label="任务列表" name="1">
			<!-- 顶部按钮 start -->
			<div class="top-box">
				<el-button type="primary" @click="openAddHomeworkDialog">发布任务</el-button>
				<div width="120px"><el-input clearable v-model="search" placeholder="搜索名字" /></div>
			</div>
			<!-- 顶部按钮 end -->
			<!-- 数据表格 start -->
			<el-table
				ref="multipleTable"
				:data="tableData"
				style="width: 100%"
				v-loading="isLoading"
				:border="true"
			>
				<!--<el-table-column type="selection" width="55" />-->
				<el-table-column property="title" label="任务标题" >
					<template #default="scope">
						<!-- 这里每个单元格要设置鼠标放上去变成手的样式，所以只能写在这里面 -->
						<div @click="handleEdit1(scope.$index, scope.row)" class="homework-title">
							{{scope.row.title}}
						</div>
					</template>
				</el-table-column>
				<el-table-column property="content" label="任务内容" />
				<el-table-column property="startTime" label="开始时间" >
					<template #default="scope">
						{{getDateString(scope.row.startTime)}}
					</template>
				</el-table-column>
				<el-table-column property="endTime" label="结束时间" >
					<template #default="scope">
						{{getDateString(scope.row.endTime)}}
					</template>
				</el-table-column>
				<el-table-column label="附件" >
					<template #default="scope">
						<div v-if="scope.row.appendix" title="点击下载" class="appendix-box"
							 @click="download(scope.row.appendix)">
							<el-icon :size="20"><files /></el-icon>
							{{scope.row.appendix.split('/')[4]}}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="任务班级" >
					<template #default="scope">
						{{ getClassName(scope.row.classId) }}
					</template>
				</el-table-column>
				<el-table-column label="发布教师" >
					<template #default="scope">
						{{
							teacherInfoData.thisEditCourse.teacherList.filter(item=>{
							if(item.id==scope.row.teacherId){
								return true;
							}
							return false;})[0].name
						}}
					</template>
				</el-table-column>
				<el-table-column label="详细" width="145px">
					<template #default="scope">
						<el-button size="mini" type="primary"
							   @click="openEditHomeworkDialog(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger"
							   @click="deleteHomework(scope.row.id)">删除</el-button>

						<!--<el-button size="mini" type="success"
							   @click="handleEdit1(scope.$index, scope.row)">详细</el-button>-->

					</template>
				</el-table-column>
			</el-table>
			<!-- 数据表格 end -->
			<!-- 底部批量操作 start -->
			<!--<div style="margin-top: 20px">
				批量操作
				<el-button type="primary" @click="getFilterTableData">修改</el-button>
				<el-button type="danger" @click="">关闭</el-button>
			</div>-->
			<!-- 底部批量操作 end -->
		</el-tab-pane>
		<!-- 第二个 详细信息 start -->
		<el-tab-pane
			v-for="item in tabsData"
			:key="item.name"
			:label="item.title"
			:name="item.name"
		>
			<lzk-homework-info :homework="item.content"></lzk-homework-info>

		</el-tab-pane>
		<!-- 第二个 详细信息 end -->
	</el-tabs>
</div>
</div>
<!-- 最外面一层背景色 end -->

<!-- 新增 或 修改基础信息的对话框 start -->
<el-dialog v-model="dialogChangeVisible" :title="editHomework.t" :close-on-press-escape="false">
	<el-form :model="editHomework">
		<el-form-item label="任务标题">
			<el-input v-model="editHomework.title"></el-input>
		</el-form-item>
		<el-form-item label="任务内容">
			<el-input type="textarea" :rows="3" v-model="editHomework.content"></el-input>
		</el-form-item>
		<el-form-item label="任务时间">
			<el-col :span="11">
				<el-date-picker
					v-model="editStartTime"
					type="datetime"
					placeholder="开始时间"
					style="width: 100%"
				></el-date-picker>
			</el-col>
			<el-col :span="2" class="text-center">
				<span class="text-gray-500">-</span>
			</el-col>
			<el-col :span="11">
				<el-date-picker
					v-model="editEndTime"
					type="datetime"
					placeholder="结束时间"
					style="width: 100%"
				></el-date-picker>
			</el-col>
		</el-form-item>
		<el-form-item label="发布班级">
			<el-select v-model="editHomework.classId" placeholder="选择班级">
				<el-option v-for="item in this.classList.filter(item=>{
					let tag=false;
					this.teacherInfoData.thisEditCourse.classRelationshipList.forEach(cItem=>{
						if (cItem.classId==item.id){
							tag=true;
						}
					});
					return tag;
					})" :label="item.name" :value="item.id">
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="上传附件">
			<el-upload
				action="http://localhost:8080/homework/uploadAppendix"
				:limit="1"
				@success="uploadAppendixSuccess"
				name="file"
				multiple
			>
				<el-button type="primary">点击上传</el-button>
				<span style="color: red;margin-left: 20px">{{editHomework.appendix}}</span>
			</el-upload>
		</el-form-item>
	</el-form>
	<template #footer>
	  <span class="dialog-footer">
		<el-button @click="closeDialog">取消</el-button>
		<el-button type="primary" @click="chengeEditCourseBaseInfo">确定</el-button>
	  </span>
	</template>
</el-dialog>
<!-- 新增 或 修改基础信息的对话框 end -->

</template>

<script>
import axios from "@/plugins/axios";
import ipconfig from "@/utils/ipconfig";
import {ElMessage,ElMessageBox} from "element-plus";
import DateUtils from "@/utils/DateUtils";
import HomeworkInfo from "@/views/teacher/courseInfo/homework/HomeworkInfo";

export default {
	name: "HomeworkIndex",
	data(){
		return {
			/**
			 * 教师登录数据
			 */
			teacherInfoData:this.$store.state.teacherInfoData,
			nowTabs:'1',
			/**
			 * 表格数据，存放课程列表
			 *
			 */
			tableData:[],
			/*
			* tabs的数据
			* */
			tabsData:[],
			/**
			 * 控制加载效果显示
			 */
			isLoading:true,
			/*
			* 班级列表
			* */
			classList:[],
			/*
			* 搜索的内容
			* */
			search:"",
			/*
			* 控制修改对话框显示
			* */
			dialogChangeVisible:false,
			/*
			* 当前编辑的任务
			* */
			editHomework:{},
			/*
			* 新增和编辑框选中的开始时间
			* */
			editStartTime:{},
			/*
			* 新增和编辑框选中的结束时间
			* */
			editEndTime:{},

		}
	},
	methods:{
		/*
		* 这里使用工具类的方法，在递归时会找不到自己，所以在这定义，后面解决
		* */
		deepClone(obj){
			let result = Array.isArray(obj) ? [] : {};
			for (let key in obj) {
				if (typeof obj[key] === 'object' && obj[key] !== null) {
					result[key] = this.deepClone(obj[key]); //递归复制
				} else {
					result[key] = obj[key];
				}
			}
			return result;
		},
		/**
		 * 导入到详细界面
		 * @param index
		 * @param value 在数据列表中，这一行的数据
		 */
		handleEdit1(index, value){
			// 这里用深拷贝 这样赋值才不会修改原来的
			this.editHomework=this.deepClone(value);
			// 把index值赋值到属性上，后面修改的时候用得到
			// this.thisEditCourse.index=index;
			// this.dialogChangeVisible=true;
			this.tabsData[0]={
				title:'《'+this.editHomework.title+'》',
				name:"2",
				content:this.editHomework
			};
			this.nowTabs="2";

		},
		/*
		* 打开编辑对话框
		* */
		openEditHomeworkDialog(index, value){
			// 这里用深拷贝 这样赋值才不会修改原来的
			this.editHomework=this.deepClone(value);
			// 把index值赋值到属性上，后面修改的时候用得到
			this.editHomework.index=index;
			// 时间
			this.editStartTime=new Date(this.editHomework.startTime);
			this.editEndTime=new Date(this.editHomework.endTime);
			// 标题
			this.editHomework.t="修改课程任务";
			this.dialogChangeVisible=true;
		},
		/**
		 * 关闭对话框
		 */
		closeDialog(){
			// 1.清空当前编辑的对象数据
			this.editHomework={};
			// 2.关闭显示
			this.dialogChangeVisible=false;
			// 3.清空时间
			this.editStartTime={};
			this.editEndTime={};
		},
		/**
		 * 获取班级名称
		 * @param classId
		 * @returns {string}
		 */
		getClassName(classId){
			let name="";
			this.classList.forEach(item=>{
				if (item.id==classId){
					name=item.name;
				}
			});
			return name;
		},
		/*
		* 获取显示时间
		* @param date 时间戳
		* @returns {string}
		* */
		getDateString(date){
			return DateUtils.getDateSting(date);
		},
		/*
		* 获取筛选的数据
		* */
		getFilterTableData(){
			console.log(this.teacherInfoData.loginInfo.id)
		},
		/*
		* 确定修改课程的基础信息
		* */
		chengeEditCourseBaseInfo(){
			// 先把选种的时间值赋进去
			this.editHomework.startTime=this.editStartTime.getTime();
			this.editHomework.endTime=this.editEndTime.getTime();
			axios.post(ipconfig.address+"/homework/addOrUpdateHomework",{
				...this.editHomework
			}).then((response)=>{
				if(response.data.code==200){
					ElMessage.success(response.data.message);
					location.reload();
				}else{
				    ElMessage.warning(response.data.message);
				}
			}).catch((error)=>{
			    console.log(error);
			});
		},
		/**
		 * 删除tabs
		 * @param targetName 被删除的标签
		 */
		removeTab(targetName){
			if(targetName=='1'){
				console.log(targetName);
			}else{
				this.tabsData={};
				this.nowTabs='1';
			}
		},
		/**
		 * 打开新建课程任务对话框，就是打开一个空的
		 */
		openAddHomeworkDialog(){
			this.editHomework={
				t:"发布任务",
				teacherId:this.teacherInfoData.loginInfo.id,
				courseId:this.teacherInfoData.thisEditCourse.id
			};
			console.log(this.editHomework);
			this.dialogChangeVisible=true;
		},
		/**
		 * 上传文件成功的回调
		 * @param response
		 * @param file
		 * @param fileList
		 */
		uploadAppendixSuccess(response, file, fileList){
			this.editHomework.appendix=response.data;
		},
		/**
		 * 删除一个课程任务
		 * @param homeworkId
		 */
		deleteHomework(homeworkId){
			ElMessageBox.confirm(
				'确定要删除该任务吗？'+homeworkId,
				'你确定？',
				{
					confirmButtonText: '删除',
					cancelButtonText: '取消',
					type:"warning"
				}
			).then(()=>{
				axios.delete(ipconfig.address+"/homework/deleteHomework/"+homeworkId).then((response)=>{
					if(response.data.code==200){
						ElMessage.success(response.data.message);
						location.reload();
					}else{
						ElMessage.warning(response.data.message);
					}
				}).catch((error)=>{

				});
			});
		},
		download(path){
			window.open("http://localhost:8080/file/download?path="+path);
		},
		/**
		 * 打开课程任务详情页
		 * @deprecated 现在用的 {@link handleEdit1}
		 * @param index
		 * @param value
		 */
		homeworkInfo(index, value){
			console.log("index:"+index);
			console.log(value);

		},
	},
	mounted() {
		// 获取展示的数据
		axios.get(ipconfig.address+"/homework/homeworkList/"+this.teacherInfoData.thisEditCourse.id).then((response)=>{
			if(response.data.code==200){
				this.tableData=response.data.data;
				console.log(this.tableData)
				// 加载效果关了
				this.isLoading=false;
			}else {
				ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
			console.log(error);
		});
		// 这里获取班级列表
		axios.get(ipconfig.address+"/common/dictionary?decription=班级").then((response)=>{
			if(response.data.code==200){
				this.classList=response.data.data;
			}else{
				ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
			console.log(error);
		});
	},
	components:{
		"lzk-homework-info":HomeworkInfo,
	},
}
</script>

<style lang="scss" scoped>
.appendix-box{
	cursor: pointer;
	&:hover{
		color: red;
	}
}
.homework-manage-box{
	width: 100%;
	background: #ffffff;
	.homework-content{
		padding: 20px;

		.top-box{
			margin-top: 20px;margin-bottom: 20px;
			display: flex;

			div{
				margin-left: 10px;
			}
		}
		.homework-title{
			cursor: pointer;

			&:hover{
				color: #0000EE;
				text-decoration:underline;
			}
		}
	}
}

</style>